<template>
	<view class="content-box loginBackground">
		<view class="startClass" v-show="!toInput" @click="changeToInput">
		</view>
		<view class="loginDialog" v-show="toInput">
			<view class="inputClass">
				<uni-easyinput trim="all" v-model="userName" placeholder="请输入用户名"></uni-easyinput>
				<view style="height: 20rpx;width: 100%;">
				</view>
				<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
			</view>
			<view class="buttonLoginDialog">
				<button type="default" class="buttonClass" @click="loginFn">登录</button>
				<button type="default" class="buttonClass">注册</button>
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		usePiniaStore
	} from '/pages/store/index.js';
	import md5 from 'js-md5'
	import utils from '../../common/utils';
	let store = usePiniaStore()

	let userName = ref("")
	let password = ref("")
	let toInput = ref(false)
	let msgType = ref("")
	let messageText = ref("")
	let message = ref(null)

	onMounted(() => {})
	const loginFn = () => {
		if (userName.value) {
			if (password.value) {
				login()
			} else {
				//没得密码
				msgType.value = 'error'
				messageText.value = `请填入密码`
				message.value.open()
			}
		} else {
			//没得用户名
			msgType.value = 'error'
			messageText.value = `请填入用户名`
			message.value.open()
		}
	}
	const changeToInput = () => {
		toInput.value = true
	}
	const login = () => {
		let data = {
			userName: userName.value,
			password: md5(password.value)
		}
		uni.showLoading({
			title: "登陆中..",
			mask: true
		})
		utils.requestCloudDB("update", {
			collection: "id_users",
			whereParam: {
				...data
			},
			data: {
				last_login_date: new Date().getTime()
			}
		}, (res) => {
			uni.hideLoading()
			if (res && res.updated == 1) {
				//登录成功
				let saveMsg = {
					userName: userName.value,
					last_login_date: new Date().getTime()
				}
				store.UPDATE_USER_INFO(saveMsg)
			} else {
				//登录失败
				msgType.value = 'error'
				messageText.value = `请检查用户名密码是否正确`
				messageText.value = res
				message.value.open()
			}
		})
	}
</script>

<style scoped>
	.startClass {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("../../../static/image/start.png");
		background-position: center;
		background-repeat: no-repeat;
	}

	.startClass:hover {
		cursor: pointer;
	}

	.loginBackground {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.loginDialog {
		width: 70%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 200rpx;
	}

	.buttonLoginDialog {
		width: 50%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.inputClass {
		width: 60%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin: 20rpx 0;
	}

	.buttonClass {
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #007aff;
		color: #fff;
	}
</style>